<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios案例 - 学生搜索</title>
</head>
<body>
<div id="app">
    <!-- 搜索关键字输入 -->
    <p>搜索关键字：<input type="text" v-model="searchKeyword" @input="searchStudents"></p>

    <table border="1px" width="800px">
        <tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>住址</th></tr>
        <!-- 显示搜索结果 -->
        <tr v-for="stu in filteredStudents">
            <td>{{ stu.id }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.age }}</td>
            <td>{{ stu.gender }}</td>
            <td>{{ stu.cellphone }}</td>
            <td>{{ stu.address }}</td>
        </tr>
    </table>
</div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [], // 原始学生集合
            filteredStudents: [], // 过滤后的学生集合
            searchKeyword: "" // 搜索关键字
        },
        methods: {
            // 加载学生
            loadStudents() {
                axios.get("http://localhost:8080/findStudents")
                    .then(result => {
                        if (result.data.code == 200) {
                            // 把后台的数据绑定到模型中，并初始化过滤后的学生集合
                            this.students = result.data.data;
                            this.filteredStudents = this.students;
                        }
                    })
                    .catch(error => {
                        console.error("加载学生数据失败：", error);
                    });
            },
            // 搜索学生
            searchStudents() {
                if (this.searchKeyword.trim() === "") {
                    // 如果关键字为空，显示所有学生
                    this.filteredStudents = this.students;
                } else {
                    // 根据关键字过滤学生列表
                    this.filteredStudents = this.students.filter(stu => stu.name.includes(this.searchKeyword));
                }
            }
        },
        mounted() {
            // 调用加载学生方法
            this.loadStudents();
        }
    });
</script>
</body>
</html>